<!-- 章节练习 -->
<template>
  <div class="chapterExercises-page">
    <div class="theory-box">
      <div class="theory-box-l">

        <el-tree
            :data="treeList"
            :props="defaultProps"
            :default-expanded-keys="defaultExpandedKeys"
            node-key="id"
            :render-content="renderContent"
            @node-click="handleNodeClick">
        </el-tree>
<!--        <div class="theory-box-l-title">基础知识</div>-->
<!--        <div style="margin-bottom: 20px">-->
<!--          <el-tree-->
<!--              :data="data"-->
<!--              :props="defaultProps"-->
<!--              :style="{ '&#45;&#45;tree-node-color': checkedNodeFontColor }"-->
<!--              @node-click="handleNodeClick">-->
<!--          </el-tree>-->
<!--        </div>-->
<!--        <div class="theory-box-l-title">基础知识</div>-->
<!--        <div>-->
<!--            <el-tree-->
<!--                :data="data"-->
<!--                :props="defaultProps"-->
<!--                :style="{ '&#45;&#45;tree-node-color': checkedNodeFontColor }"-->
<!--                @node-click="handleNodeClick">-->
<!--            </el-tree>-->
<!--            </div>-->
      </div>
      <div class="theory-box-r">
        <ExamPractice :dataList="list" :paperId="paperId" :recordId="recordId" :Qsindex="Qsindex" @send="sendClick" @onchange="onchange" @getData="getData"></ExamPractice>
      </div>
    </div>
  </div>
</template>

<script>
import ExamPractice from '@/components/ExamPractice'
import {getNestedData, getResultAnswer, getSimulateDetail, getSimulatedExam, getStartAnswer} from '@/api'
export default {
  name: "chapterExercises",
  components: {
    ExamPractice
  },
  data() {
    return {
      checkedNodeFontColor: '#FF0000', // 选中节点的字体颜色
      Qsindex: 0,
      Qnum: 0,
      data: [
        {
            label: '一、职业道德',
            children: [
                {label: '1、职业道德基础知识'},
                {label: '2、职业守则'},
            ]
          },
        { label: '二、消防工作概述'},
        { label: '三、建筑防火基本知识'},
        { label: '四、燃烧和火灾基本知识'}
      ],
      treeList: [],
      list: [],
      paperId: 0,
      recordId: null,
      defaultProps: {
        children: 'children',
        label: 'title'
      },
      defaultExpandedKeys: [],
      ids: ''
    }
  },

  mounted() {
    this.ids = this.$route.query.id
    this.getNestedData()
  },
  methods: {
    getLastLevelKeys(nodes) {
      let keys = [];
      nodes.forEach(node => {
        if (node.children && node.children.length > 0) {
          keys = keys.concat(this.getLastLevelKeys(node.children));
        } else {
          keys.push(node.id); // 假设 label 就是 key，实际情况下可能需要根据实际情况调整
        }
      });
      return keys;
    },
    // 获取节点
    getNestedData() {
      getNestedData({ outline_type: 1 }).then(res => {
        this.treeList = res.data
        let params = {
          outline_id: ''
        }
        if (this.ids) {
          params.outline_id = this.ids
          this.defaultExpandedKeys = [Number(this.ids)]
        } else {
          let id = this.getLastLevelKeys(this.treeList)[0];
          this.defaultExpandedKeys = [id]
          params.outline_id = id
        }
        if (res.data.length == 0) {
          return
        }
        getSimulatedExam(params).then(res=> {
          if (res.code == 1) {
            this.paperId = res?.data?.list?.data[0]?.paper_id || ''
            if (this.paperId) {
              this.getDetail(this.paperId)
            }
          }
        })
      })
    },
    // 点击节点获取题目
    handleNodeClick(data, node) {
      // 如果当前节点是最后一级，则执行点击操作
      if (node.level == 3) {
        let params = {
          outline_id: data.id
        }
        getSimulatedExam(params).then(res=> {
          if (res.code == 1) {
            this.paperId = res?.data?.list?.data[0]?.paper_id || ''
            if (this.paperId) {
              this.getDetail(this.paperId)
            }
          }
        })
      } else {
        // 如果不是最后一级，则阻止向上冒泡，不执行任何操作
        return false;
      }
    },

    // 获取模拟考试题目
    getDetail(id) {
      let params = {
        paper_id: id
      }
      getStartAnswer(params).then(res=> {
        if (res.code == 1) {
          this.Qnum++
          this.recordId = res.data.detail.record_id
          this.list = res.data.detail.question.map((item)=> {
            if (item.answer_state == 2) {
              item.question.analysisShow = true
            } else {
              item.question.analysisShow = false
            }
            return {
              ...item,
            }
          })

          let arr = this.list[this.Qsindex]
          if (arr.answer_state == 1 && this.Qnum !== 1) {
            setTimeout(() => {
              if (this.Qsindex < this.list.length - 1) {
                this.Qsindex = this.Qsindex + 1;
              }
            }, 400);
          } else {
            if (arr.answer_state == 2) {
              this.list[this.Qsindex].question.analysisShow = true
            } else {
              this.list[this.Qsindex].question.analysisShow = false
            }
          }
          if (this.Qnum == 1) {
            const index = this.list.findIndex(item => item.answer_state == 0 && !item.answer);
            this.Qsindex = index
          }

        }
      })
    },
    onchange(e) {
      if (e == 1) {
        if(this.Qsindex != 0) {
          this.Qsindex--
        } else {
          this.Qsindex = 0
        }
      } else {
        if (this.Qsindex + 1 == this.list.length) {
          this.Qsindex == this.list.length
        } else {
          this.Qsindex++
        }
      }
    },
    getData() {
      this.getDetail(this.paperId)
    },
    // aaa
    sendClick(e){
      this.Qsindex = e
    },
    renderContent(h, { node, data }) {
      if (node.level == 3) {
        return (
            <span>
              <i class="el-icon-document" style="margin-right: 4px;"></i> {node.label}
            </span>
        );
      } else {
        return (
            <span>
              <i class="el-icon-folder" style="margin-right: 4px;"></i> {node.label}
            </span>
        );
      }
      // if (node.childNodes && node.childNodes.length>0 || node.level == 1) {
      //   return (
      //       <span>
      //         <i class="el-icon-folder" style="margin-right: 4px;"></i> {node.label}
      //       </span>
      //   );
      // } else {
      //   return (
      //       <span>
      //         <i class="el-icon-document" style="margin-right: 4px;"></i> {node.label}
      //       </span>
      //   );
      // }
    },

  }
}
</script>

<style lang="scss" scoped>
.chapterExercises-page {
  width: 100%;
  height: 100%;
  ::v-deep .el-tree .el-tree-node__content {
    padding:3px 0;
  }
  /* 覆盖被选中节点的字体颜色 */
  ::v-deep .el-tree .el-tree-node__content:hover {
    color: #409EFF; /* 更改为你想要的颜色 */
  }
  ::v-deep .el-tree-node:focus>.el-tree-node__content {
    color: #409EFF!important;
  }
}
</style>
